/* Shared navigation styles for both floating and docked navigation */

/* Base navigation styles */
.mobile-nav-base {
	pointer-events: auto;
	/* Capture vertical gestures so opening the sheet doesn't scroll the page while still allowing horizontal swipes and pinch zoom */
	touch-action: pan-x pinch-zoom;
	overscroll-behavior: contain;
	/* Isolate touch interactions */
	isolation: isolate;
	/* Hardware acceleration for smooth animations */
	will-change: transform, opacity;
	/* Prevent layout shifts during animation */
	transform-origin: center bottom;
	/* Smooth subpixel rendering */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Ensure it stays fixed to viewport, not page content */
	position: fixed;
	/* Prevent the nav from being affected by virtual keyboard */
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	/* Prevent body scroll leak */
	contain: layout style paint;
}

/* Floating navigation specific positioning */
.mobile-nav-floating {
	/* Safe area handling for floating navigation */
	/* Use safe area inset if it's greater than 1.5rem, otherwise use 1.5rem */
	bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* Docked navigation specific positioning */
.mobile-nav-docked {
	/* Safe area handling for devices with home indicators */
	padding-bottom: env(safe-area-inset-bottom);
	/* Keep it anchored to bottom */
	bottom: 0;
}

/* Shared button/link styles */
.mobile-nav-base :global(button),
.mobile-nav-base :global(a) {
	pointer-events: auto;
	touch-action: manipulation; /* Allow taps and prevent interfering gestures */
	position: relative;
	z-index: 1; /* Ensure buttons are above gesture detection */
	/* Isolate button touches from parent's touch handling */
	isolation: isolate;
}

/* Cursor device visual hints */
@media (hover: hover) and (pointer: fine) {
	.mobile-nav-floating:hover {
		/* Subtle visual hint that scrolling up will open menu without moving the bar */
		box-shadow:
			0 4px 20px rgba(0, 0, 0, 0.08),
			0 1px 4px rgba(0, 0, 0, 0.04);
		backdrop-filter: blur(24px);
		border-color: var(--muted);
	}

	.mobile-nav-base :global(button),
	.mobile-nav-base :global(a) {
		cursor: pointer;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.mobile-nav-base {
		transition: none;
	}

	/* Disable scale and complex animations for reduced motion */
	.mobile-nav-base :global(button) {
		transition: none;
		transform: none !important;
	}

	.mobile-nav-base :global(button:hover),
	.mobile-nav-base :global(button:focus-visible),
	.mobile-nav-base :global(button:active) {
		transform: none !important;
	}
}
